<%@ page language="java" import="java.util.*,com.wyb.moto.model.Admin" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
Admin admin = (Admin)request.getSession().getAttribute("user");
%>
<!DOCTYPE html>
<html>
    
    <head>
    <base href="<%=basePath%>">
        <title>Forms</title>
        <!-- Bootstrap -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="bootstrap/css/dataTables.bootstrap.css" rel="stylesheet" media="screen">
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <link href="assets/styles.css" rel="stylesheet" media="screen">
        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="vendors/flot/excanvas.min.js"></script><![endif]-->
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
         <style>
        .dataTables_filter,.dataTables_length{
        	display:none;
        }
       </style>
    </head>
    
    
    <body>
    
    <!-- 公共头部Header，除了登录界面，每个界面都加这一部分    start -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#">幼儿园请假管理系统</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav pull-right">
                            <li class="dropdown">
                                <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-user"></i><%=admin.getXm() %> <i class="caret"></i>
                                </a>
                                <ul class="dropdown-menu">
                                  
                                    <li>
                                        <a tabindex="-1" href="login.jsp">注销</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="nav">
                            <li class="active">
                                <a href="#">管理</a>
                            </li>
                         
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div>
           <!-- 公共头部Header，除了登录界面，每个界面都加这一部分    start -->
           
           
           
         <!-- 注册页面 -->  
        <div class="container-fluid">
            <div class="row-fluid">
                
                <!--/span-->
                <div class="span9" id="content">
                      <!-- morris stacked chart -->
                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                    
            <form>
					请输入搜索内容:<input type="text" id="displayName" class="">
					
					<input type="button" id="Query" value="Query" class="btn btn-success">
					
			</form>                     
           <table id="example" class="table table-striped table-bordered">
			<thead>
				<tr>
				    <th>id</th>
					<th>幼儿编号</th>
					<th>姓名</th>
					<th>请假开始时间</th>
					<th>请假结束时间</th>
					<th>请假事由</th>
					<th>操作</th>
				</tr>
			</thead>
		</table>

                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>

                </div>
            </div>
            <hr>
        </div>
        <!--/.fluid-container-->
        <link href="vendors/datepicker.css" rel="stylesheet" media="screen">
        <link href="vendors/uniform.default.css" rel="stylesheet" media="screen">
        <link href="vendors/chosen.min.css" rel="stylesheet" media="screen">

        <link href="vendors/wysiwyg/bootstrap-wysihtml5.css" rel="stylesheet" media="screen">

        <script src="vendors/jquery-1.9.1.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="vendors/jquery.uniform.min.js"></script>
        <script src="vendors/chosen.jquery.min.js"></script>
        <script src="vendors/bootstrap-datepicker.js"></script>

        <script src="vendors/wysiwyg/wysihtml5-0.3.0.js"></script>
        <script src="vendors/wysiwyg/bootstrap-wysihtml5.js"></script>

        <script src="vendors/wizard/jquery.bootstrap.wizard.min.js"></script>

	<script type="text/javascript" src="vendors/jquery-validation/dist/jquery.validate.min.js"></script>
	<script src="assets/form-validation.js"></script>
        
	<script src="assets/scripts.js"></script>
	<script src="assets/jquery.dataTables.min.js"></script>
	<script src="assets/dataTables.bootstrap.js"></script>
	<script src="assets/handlebars-v3.0.1.js"></script>
	
		<!--定义操作列按钮模板-->
<script id="tpl" type="text/x-handlebars-template">
    {{#each func}}
    <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>
    {{/each}}
</script>
	
	
        <script>

    	
    	
    	var dataTable; 
    	var editTable = false;
    	var template;//公共变量。
    	
	jQuery(document).ready(function() {   
	   FormValidation.init();
	   
	   
	   //预编译模板
		 var tpl = $("#tpl").html();
	     template = Handlebars.compile(tpl);
	        
		//dataTable = initDatable();//这个也可以
		dataTable = initDatableByConfig();
		
		
		//绑定Query btn方法
		
		$("#Query").bind("click",function(){
			
			query();
			
		});
	   
	   
	   
	   
	   
	   
	});
    	
        $(function() {
            $(".datepicker").datepicker();
            $(".uniform_on").uniform();
            $(".chzn-select").chosen();
            $('.textarea').wysihtml5();

        /*     $('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
                var $total = navigation.find('li').length;
                var $current = index+1;
                var $percent = ($current/$total) * 100;
                $('#rootwizard').find('.bar').css({width:$percent+'%'});
                // If it's the last tab then hide the last button and show the finish instead
                if($current >= $total) {
                    $('#rootwizard').find('.pager .next').hide();
                    $('#rootwizard').find('.pager .finish').show();
                    $('#rootwizard').find('.pager .finish').removeClass('disabled');
                } else {
                    $('#rootwizard').find('.pager .next').show();
                    $('#rootwizard').find('.pager .finish').hide();
                }
            }}); */
            $('#rootwizard .finish').click(function() {
                alert('Finished!, Starting over!');
                $('#rootwizard').find("a[href*='tab1']").trigger('click');
            });
        });
        
        
    	function query(){
			dataTable.fnDestroy(false);
			initDatableByConfig();//
		}
        
        function deleteEmp(associateId){
			var url ="logincontroller/deleteQj.htmls" ;
        	$.ajax({
	            url:url ,
	            data:{
	            	"id":associateId,
	            }, 
	            success: function (data) {
	                query();
	            }
        	});
		}
	/* 	function ajax(json) {
        	var url ="/lxf/servlet/GetEmployeeInfo" ;
        	$.ajax({
	            url:url ,
	            data:json, 
	            success: function (data) {
	            	//dataTable.ajax.reload();
	                $("#myModal").modal("hide");
	                query();
	            }
        });
    } */
        
		
		function initDatableByConfig(){
			$.dataTablesSettings.ajax={
					url:"logincontroller/queryQj.htmls", //查询请求
			};
			$.dataTablesSettings.ajax.data={//向后台传递的参数
					operate:"query",
					searchtext:$("#displayName").val()
			};
			//这里对应后台数据返回的列名
			$.dataTablesSettings.columns= [
			   			                {"data": "id"}, 
			   			                {"data": "bh"}, 
						                {"data": "yexm"},
						                {"data": "kssj"},
						                {"data": "jssj"},
						                {"data": "qjly"},
						                {"data": null},
						            ];
			$.dataTablesSettings.columnDefs=[
							{
			                    "targets":-1,
			                    "render": function (a, b, c, d) {
			                        var context =
			                        {
			                            func: [
			                                {"name": "删除", "fn": "deleteEmp(\'" + c.id + "\')", "type": "danger"}
			                            ]
			                        };
			                        var html = template(context);
			                        return html;
			                    }
			                },
	       					{
								    "targets": 0,//第一列隐藏
								    "visible": false,
								    "searchable": false
							}   
			                
			                                 
			            ];
			
			var dataTable = $("#example").dataTable($.dataTablesSettings);
			return dataTable;
		}
		
		
		$.dataTablesSettings = {
				"searching": true,
		}
		
		
        
        
        
        
        
        
        
        
        
        </script>
    </body>

</html>